<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">

    <title>侧边栏</title>
    <!-- vue2 -->
    <script src="script/vue_2.js"></script>
    <!-- element 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- element 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="script/jquery-3.6.0.min.js"></script>
    <style>
        .btn {
            padding: 10px;
            position: fixed;
            top: 100px;
            width: 35px;
            border: none;
            text-align: center;
            vertical-align: middle;
        }

        .btn.left {
            left: 0;
            color: white;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
            background-color: skyblue;
        }

        .btn.right {
            right: 0;
            color: white;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
            background-color: orange;
        }

        .draw {
            margin: 0;
            padding: 0;
            position: fixed;
            top: 0;
            bottom: 0;
            z-index: 500;
            transition: all linear 0.2s;
            -moz-transition: all linear 0.2s;
            overflow-y: auto;
        }

        .draw.left {
            width: 300px;
            background-color: skyblue;
            left: 0;
            /*初始打开*/
        }

        .draw.right {
            width: 300px;
            background-color: orange;
            right: 0px;
            /*初始打开*/
        }

        button.close {
            height: 50px;
            width: 50;
            border: none;
        }

    </style>
</head>

<body>
    <div id="app">
        <button class="btn left" onclick="OpenLeftBox()">展开左边栏</button>
        <button class="btn right" onclick="OpenRightBox()">展开右边栏</button>
        <aside class="draw left" id="leftbox">
            <el-row>
                <el-col :span="20">
                    <h2>左边栏</h2>
                </el-col>
                <el-col :span="4">
                    <button class="close" onclick="CloseLeftBox()">关闭</button>
                </el-col>
            </el-row>
        </aside>
        <aside class="draw right" id="rightbox">
            <el-row>
                <el-col :span="20">
                    <h2>右边栏</h2>
                </el-col>
                <el-col :span="4">
                    <button class="close" onclick="CloseRightBox()">关闭</button>
                </el-col>
            </el-row>
        </aside>
    </div>
    <script>
        var app;
        $(function () {
            app = new Vue({
                el: '#app',
                data: {
                }
            });
        });
        //侧边栏
        function OpenLeftBox() {
            $(".draw.left").css({ "left": "0" });
        }
        function CloseLeftBox() {
            $(".draw.left").css({ "left": "-300px" });
        }
        function OpenRightBox() {
            $(".draw.right").css({ "right": "0" });
        }
        function CloseRightBox() {
            $(".draw.right").css({ "right": "-300px" });
        }
    </script>
</body>

</html>